<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato:600);
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  height: 100vh;
			  background: #222;
			}
			
			.rotating-text {
			  font-family: Lato, sans-serif;
			  font-weight: 600;
			  font-size: 36px;
			  color: white;
			  transform: translateX(-80px);
			}
			.rotating-text p {
			  display: inline-flex;
			  margin: 0;
			  vertical-align: top;
			}
			.rotating-text p .word {
			  position: absolute;
			  display: flex;
			  opacity: 0;
			}
			.rotating-text p .word .letter {
			  transform-origin: center center 25px;
			}
			.rotating-text p .word .letter.out {
			  transform: rotateX(90deg);
			  transition: 0.32s cubic-bezier(0.6, 0, 0.7, 0.2);
			}
			.rotating-text p .word .letter.in {
			  transition: 0.38s ease;
			}
			.rotating-text p .word .letter.behind {
			  transform: rotateX(-90deg);
			}
			
			.alizarin {
			  color: #e74c3c;
			}
			
			.wisteria {
			  color: #8e44ad;
			}
			
			.peter-river {
			  color: #3498db;
			}
			
			.emerald {
			  color: #2ecc71;
			}
			
			.sun-flower {
			  color: #f1c40f;
			}
		</style>
	</head>
	<body>
		<div class="rotating-text">
		  <p>难熬的日子总会过去</p>
		  <p>
		    <span class="word alizarin">不信你回头看看</span>
		    <span class="word wisteria">你已经在不知不觉中</span>
		    <span class="word peter-river">熬过了很多苦难</span>
		    <span class="word emerald">余生很长</span>
		    <span class="word sun-flower">不必慌张</span>
		  </p>
		</div>
	</body>
</html>
<script>
	"use strict";
	let words = document.querySelectorAll(".word");
	words.forEach(word => {
	    let letters = word.textContent.split("");
	    word.textContent = "";
	    letters.forEach(letter => {
	        let span = document.createElement("span");
	        span.textContent = letter;
	        span.className = "letter";
	        word.append(span);
	    });
	});
	let currentWordIndex = 0;
	let maxWordIndex = words.length - 1;
	words[currentWordIndex].style.opacity = "1";
	let rotateText = () => {
	    let currentWord = words[currentWordIndex];
	    let nextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];
	    // rotate out letters of current word
	    Array.from(currentWord.children).forEach((letter, i) => {
	        setTimeout(() => {
	            letter.className = "letter out";
	        }, i * 80);
	    });
	    // reveal and rotate in letters of next word
	    nextWord.style.opacity = "1";
	    Array.from(nextWord.children).forEach((letter, i) => {
	        letter.className = "letter behind";
	        setTimeout(() => {
	            letter.className = "letter in";
	        }, 340 + i * 80);
	    });
	    currentWordIndex =
	        currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;
	};
	rotateText();
	setInterval(rotateText, 4000);

</script>